<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" th:href="@{Css/bootstrap4.6.2.css}">
    <script th:src="@{JS/jquery.slim.min.js}"></script>
    <script th:src="@{JS/bootstrap.min.js}"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        a {
            text-decoration: none;
            color: blue;
        }
        a:hover {
            text-decoration: underline;
        }
        .container {
            position: relative !important;
        }
        .info-img {
            width: 30px;
            height: 30px;
        }
        .page-item {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;  /* 如果你只想让文字水平居中，而不影响其他元素，可以添加此行 */
            padding-right: 10px;
        }
    </style>
</head>
<body>
<div class="container">
<h1>学生信息列表</h1>
    <!--条件查询-->
<!--    <form class="form-inline" action="/listPage">-->
<!--        <div class="form-group mb-2">-->
<!--            <label for="username" class="">用户名:</label>-->
<!--            <input type="text" class="form-control" id="username" placeholder="name" name="name" th:value="${condition.name}">-->
<!--        </div>-->
<!--        <div class="form-group mx-sm-3 mb-2">-->
<!--            <label class="">性别：</label>-->
<!--            <div class="form-check form-check-inline">-->
<!--                <input class="form-check-input" type="radio" name="gender" id="inlineRadio1"-->
<!--                       value="男" th:checked="${condition.gender == '男' ? true : false}">-->
<!--                <label class="form-check-label" for="inlineRadio1">男</label>-->
<!--            </div>-->
<!--            <div class="form-check form-check-inline">-->
<!--                <input class="form-check-input" type="radio" name="gender" id="inlineRadio2"-->
<!--                       value="女">-->
<!--                <label class="form-check-label" for="inlineRadio2"-->
<!--                       th:checked="${condition.gender == '女' ? true : false}">女</label>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group mx-sm-3 mb-2">-->
<!--            <label for="ages" class="">年龄：</label>-->
<!--            <input type="text" class="form-control" id="ages" placeholder="ages" name="age"-->
<!--                   th:value="${condition.age}">-->
<!--        </div>-->
<!--        <div class="form-group mx-sm-3 mb-2">-->
<!--            <label for="grade" class="">成绩：</label>-->
<!--            <input type="text" class="form-control" id="grade" placeholder="grade" name="score"-->
<!--                   th:value="${condition.score}">-->
<!--        </div>-->
<!--        <button type="submit" class="btn btn-primary mb-2">查询</button>-->
<!--    </form>-->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1">添加学生信息</button>
<!--    学生信息列表-->
    <table border="1" class="table table-striped">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>成绩</th>
        <th>删除信息</th>
        <th>修改信息</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="student : ${studentList}">
        <td th:text="${student.id}"></td>
        <td th:text="${student.name}"></td>
        <td th:text="${student.gender}"></td>
        <td th:text="${student.age}"></td>
        <td th:text="${student.score}"></td>
        <td><a th:href="@{'/delete?id=' + ${student.id}}">删除</a></td>
        <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
                    th:data-whatever="${student.id}">修改
            </button>
        </td>
    </tr>
    </tbody>
</table>

<!--    &lt;!&ndash;    分页&ndash;&gt;-->
<!--    <nav aria-label="...">-->
<!--        <ul class="pagination justify-content-center">-->
<!--            <li class="page-item">共<span th:text="${page.total}"></span>条</li>-->
<!--            <li th:class="${page.hasPrev ? 'page-item' : 'page-item disabled'} ">-->
<!--                <a class="page-link"-->
<!--                   th:href="@{/listPage(pageNum=${page.nextNum},name=${condition.name},gender=${condition.gender},age=${condition.age},score=${condition.score})}">Previous</a>-->
<!--            </li>-->
<!--            <li th:class="${num==page.pageNum ? 'page-item active' : 'page-item'}"-->
<!--                th:each="num : ${page.pageNumbers}">-->
<!--                <a class="page-link"-->
<!--                   th:href="@{/listPage(pageNum=${num},name=${condition.name},gender=${condition.gender},age=${condition.age},score=${condition.score})}"-->
<!--                   th:text="${num}"></a></li>-->
<!--            <li th:class="${page.hasNext ? 'page-item' : 'page-item disabled'}">-->
<!--                <a class="page-link"-->
<!--                   th:href="@{/listPage(pageNum=${page.nextNum},name=${condition.name},gender=${condition.gender},age=${condition.age},score=${condition.score})}">Next</a>-->
<!--            </li>-->
<!--            <li class="page-item">共<span th:text="${page.pageCount}"></span>页</li>-->
<!--        </ul>-->
<!--    </nav>-->

<!--添加弹框-->
    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel1">添加用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="/add" method="post">
                        <div class="form-group" >
<!--                            <label for="id" class="col-form-label">学生编号:</label>-->
                            <input type="text" class="form-control" id="addId" name="id" hidden="hidden">
                        </div>
                        <div class="form-group">
                            <label for="addName" class="col-form-label">学生姓名:</label>
                            <input type="text" class="form-control" id="addName" name="name">
                        </div>
                        <div class="form-group">
                            <label for="addGender" class="col-form-label">学生性别:</label>
                            <input type="text" class="form-control" id="addGender" name="gender">
                        </div>
                        <div class="form-group">
                            <label for="addAge" class="col-form-label">出生年龄:</label>
                            <input type="text" class="form-control" id="addAge" name="age">
                        </div>
                        <div class="form-group">
                            <label for="addScore" class="col-form-label">学生成绩:</label>
                            <input type="text" class="form-control" id="addScore" name="score">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>
    <script>
        $('#exampleModal1').on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget) // Button that triggered the modal
            let id = button.data('whatever') // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            let modal = $(this)
            // modal.find('.modal-title').text('New message to ' + recipient)
            modal.find('#id').val(id)
        })
    </script>

<!--    修改弹框-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">修改信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="/updateOne" method="post">
                        <div class="form-group" >
                            <!--                            <label for="id" class="col-form-label">学生编号:</label>-->
                            <input type="text" class="form-control" id="id" name="id" hidden="hidden">
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-form-label">学生姓名:</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="gender" class="col-form-label">学生性别:</label>
                            <input type="text" class="form-control" id="gender" name="gender">
                        </div>
                        <div class="form-group">
                            <label for="age" class="col-form-label">出生年龄:</label>
                            <input type="text" class="form-control" id="age" name="age">
                        </div>
                        <div class="form-group">
                            <label for="score" class="col-form-label">学生成绩:</label>
                            <input type="text" class="form-control" id="score" name="score">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#exampleModal').on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget)
            let id = button.data('whatever')
            let modal = $(this)
            modal.find('#id').val(id)
        })
    </script>

<!--    提示判断框-->
    <div class="toast" style="position: absolute; top: 0; right: 0;width: 200px; z-index: 999" id="message-info" data-delay="5000">
        <div class="toast-header">
            <img th:src="@{image/1.gif}" class="rounded mr-2 info-img"  alt="...">
            <strong class="mr-auto">仓井老师提醒您：</strong>
            <small>欢迎来到启蒙课堂</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body" >
            [(${studentListKey})]
            <!--            Hello, world! This is a toast message.-->
        </div>
    </div>
    <script th:inline="javascript">
        let studentListKey = [[${studentListKey}]];
        if (studentListKey) {
            $('#message-info').toast('show');
        }
    </script>
</div>
</body>
</html>